<template>
	<div class="back3">
		<h1>
			注册
		</h1>
		<el-form :model="signdata" :rules="rules" ref="signdata" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="用户名" prop="username">
		    <el-input v-model="signdata.username">
				<template slot="append">
					<el-button type="primary" plain @click="checkusername">验证</el-button>
				</template>
			</el-input>
		  </el-form-item>
		 <el-form-item label="密码" prop="password">
		     <el-input type="password" v-model="signdata.password" autocomplete="off"></el-input>
		   </el-form-item>
		   <el-form-item label="确认密码" prop="checkpass">
		     <el-input type="password" v-model="signdata.checkpass" autocomplete="off"></el-input>
		   </el-form-item>
		  <el-form-item label="真实姓名" prop="realname">
		      <el-input v-model="signdata.realname"></el-input>
		  </el-form-item>
		  <el-form-item label="电话号码" prop="phonenum">
		      <el-input v-model="signdata.phonenum"></el-input>
		  </el-form-item>
		  <el-form-item label="证件号" prop="userid">
		      <el-input v-model="signdata.userid"></el-input>
		  </el-form-item>
		  <el-form-item label="地址" prop="address">
		      <el-input type="textarea" v-model="signdata.address"></el-input>
		    </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="signup">注册</el-button>
		    <el-button @click="resetForm('signdata')">重置</el-button>
		  </el-form-item>
		  
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'signup',
		data() {
			var validatePass = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请输入密码'));
			        } else {
			          if (this.ruleForm.checkPass !== '') {
			            this.$refs.ruleForm.validateField('checkPass');
			          }
			          callback();
			        }
			      };
			      var validatePass2 = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请再次输入密码'));
			        } else if (value !== this.signdata.password) {
			          callback(new Error('两次输入密码不一致!'));
			        } else {
			          callback();
			        }
			      };
				  var validatePhone = (rule, value, callback) => {
				        if (value === '') {
				          callback(new Error('请输入电话号码'))
				        }
				        if (value.length !== 11) {
				          callback(new Error('请输入正确电话号码'))
				        }
				        var ab = /^[1][3,4,5,7,8][0-9]{9}$/
				        if (ab.test(value) === false) {
				          callback(new Error('请输入正确电话号码'))
				        }
				        callback()
				      };
					var validateUserId = (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入身份证号码'))
						}
						if (value.length !== 18) {
							callback(new Error('请输入正确身份证号'))
						}
						var r = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
						if (r.test(value) === false) {
							callback(new Error('请输入正确身份证号'))
						}
						callback()
					};
		      return {
		        signdata: {
		          username: '',
				  password: '',
				  checkpass: '',
		          realname: '',
				  phonenum:'',
				  userid:'',
				  address:'',
		        },
		        rules: {
					username: [
						{required: true, message: '请输入用户名', trigger: 'blur'},
						{min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur'}
					],
					realname: [
						{ required: true, message: '请输入真实姓名', trigger: 'blur' },
						{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
					],
				   password: [
					   {min: 6, max: 25, message:'长度在6到25个字符', trigger: 'blur'},
				        { validator: validatePass, trigger: 'blur' }
				    ],
					checkpass: [
				        { validator: validatePass2, trigger: 'blur' }
				    ],
					phonenum: [
					  { required: true, message: '请输入电话号码', trigger: 'blur' },
					  { validator: validatePhone, trigger: 'blur' }

					],
					userid: [
						{ required: true, message: '请输入身份证号', trigger: 'blur'},
						{ validator: validateUserId, trigger: 'blur'}
					]
		        }
		      };
		    },
		    methods: {
				checkusername() {
					var url = "http://localhost:8848/user/checkusername?username=" + this.signdata.username;
					
					this.$axios.get(url)
						.then( (resp)=> {
							var u = resp.data;
							
							if (u == 1) {
								this.$message.success("此用户名可用");
							}
							else if (u == 0) {
								this.$message.error("此用户名重复");
							}
						})
						.catch( (err)=> {
							console.log("error=", err);
						})
				},
				signup() {
					this.$axios.post("http://localhost:8848/user/signup", this.$qs.stringify({
						username: this.signdata.username,
						password: this.signdata.password,
						realname: this.signdata.realname,
						phonenum: this.signdata.phonenum,
						userid: this.signdata.userid,
						address: this.signdata.address
					}))
						.then( (resp) => {
							var u = resp.data;
							
							if (u == 1) {
								this.$message.success("注册成功")
								this.$router.push('/')
							}
							else if (u == 0) {
								this.$message.error("注册失败请重试")
							}
						})
						.catch( (err) => {
							console.log("error=", err);
						})
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
		    }
		  }
</script>

<style>
	
	/* .back {
		position: absolute;
		top: 10%;
		left: 20%;
		background-color: #E9EEF3;
		width: 800px;
		border-radius: 25px;
		text-align: center;
		padding: 5px 40px;
		box-sizing: border-box;
	} */
	.back3 {
		width: 700px;
		margin-top: 25px;
		margin-left: 400px;
		
	}
	
	  
	  
</style>
